<template>
	<view style="padding-bottom: 130rpx">
		<view class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo">
				<view class="face"><image src="/static/image/icon/y8.jpg" mode="aspectFill"></image></view>
				<view class="info">
					<view v-if="userInfo.nickName" class="username">{{userInfo.nickName}}</view>
					<text v-else class="username" @tap="Login">点击登录</text>
					<view style="display: flex;align-items: center">
						<view class="integral">积分:{{userInfo.integral || 0}}</view>
						<view style="padding-left: 15rpx;display: flex">
							<uni-iconfont  class="icon-vipdiamond-l" size="36" color="#FFD800"></uni-iconfont>
							<text style="color: #FFD800;margin: 8rpx 0;font-size: 30rpx;font-style:italic;">1</text>
						</view>
					</view>
				</view>
			</view>
			<view class="setting" @tap="navTo('/pagesA/set/set')">
				<uni-icons type="gear" color="#fff" :size="60" ></uni-icons>
			</view>
		</view>

		<view class="tui-header-btm tui-flex">
			<view class="tui-btm-item" @tap="navTo('/pages/my/components/wallet?money=' + userInfo.walletBalance)">
				<view class="tui-btm-num">{{userInfo.walletBalance / 100 || 0}}</view>
				<view class="tui-btm-text">钱包</view>
			</view>
			<view class="tui-btm-item" @tap="navTo('/pagesA/integral/integral')">
				<view class="tui-btm-num">{{userInfo.integral || 0}}</view>
				<view class="tui-btm-text">积分</view>
			</view>
			<view class="tui-btm-item" @tap="navTo('/pagesA/card/card')">
				<view class="tui-btm-num">{{userInfo.cartNum || 0}}</view>
				<view class="tui-btm-text">购物车</view>
			</view>
		</view>

		<view class="orders">
			<view class="box">
				<view class="label" v-for="(row,index) in orderTypeLise" :key="index"
				      hover-class="hover"  @tap="navTo('/pagesA/order/order?state=' + row.Id)">
					<view class="icon">
						<view class="badge" v-if="row.staNum>0">{{row.staNum}}</view>
						<uni-iconfont class="tui-order-icon" :class="row.img" size="46" color="#333"></uni-iconfont>
					</view>
					{{row.name}}
				</view>
			</view>
		</view>

		<!--<view style="margin: 20rpx">
			<zetank-wode-server icons="grid-fill" :rightshow="false"
								:serverList="serverList" >我的订单</zetank-wode-server>
		</view>-->

		<view class="li" @tap="navTo('/pagesA/coupons/leaseList')" v-if="userInfo.isStaff == 1">
			<view class="icon">
				<uni-iconfont class="icon-jiechu" size="42" color="#666"></uni-iconfont>
			</view>
			<view class="text">租赁记录</view>
			<uni-icons type="arrowright" color="#ccc" size="40" ></uni-icons>
		</view>
		<view class="list" v-for="(list,list_i) in severList" :key="list_i">
			<view class="li" v-for="(li,li_i) in list" @tap="navTo(li.url,li.isStaff)"
			      v-bind:class="{'noborder':li_i==list.length-1}"  hover-class="hover" :key="li_i">
				<view class="icon">
					<uni-iconfont v-if="li.id == 0" :class="li.icon" size="42" color="#666"></uni-iconfont>
					<uni-icons v-else :type="li.icon" color="#666" size="38" ></uni-icons>
				</view>
				<view class="text">{{li.name}}</view>
				<uni-icons type="arrowright" color="#ccc" size="40" ></uni-icons>
			</view>
		</view>

		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>
<script>
    import { mapMutations, mapActions, mapState } from 'vuex'
    import uniIcons from "@/components/uni-icons/uni-icons.vue"
    import uniIconfont from '@/components/uni-iconfont/index'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
	import zetankWodeServer from './components/zetank-wode-server'

    export default {
        components: {
            uniIcons, uniIconfont, uniLoginModel, zetankWodeServer
        },
        data() {
            return {
                //#ifdef APP-PLUS
                isH5Plus:true,
                //#endif
                //#ifndef APP-PLUS
                isH5Plus:false,
                //#endif
                orderTypeLise:[
                    { Id: 1, name: '待付款', img: 'icon-daifukuan', staNum: '' },
                    { Id: 2, name: '待使用', img: 'icon-daishiyong', staNum: ''},
                    { Id: 3, name: '待评价', img: 'icon-daipingjia', staNum: ''},
                    { Id: 4, name: '售后', img: 'icon-shouhou', staNum: ''},
                ],
                serverList:[{
                    name: '待付款',
                    icon: 'icon-daifukuan',
                    url: '',
                    id: 1,
                    elseUrl: '',
                    colors: '#6CB041'
                }, {
					name: '待使用',
					icon: 'icon-daishiyong',
					url: '',
					id: 2,
					elseUrl: '',
                    colors: '#6CB041'
				}, {
					name: '待评价',
					icon: 'icon-daipingjia',
					url: '',
					id: 3,
					elseUrl: '',
                    colors: '#6CB041'
				}, {
					name: '售后',
					icon: 'icon-shouhou',
					url: '',
					id: 3,
					elseUrl: '',
                    colors: '#6CB041'
				}],
                severList:[
                    [
                        // {name:'租赁记录',icon: 'icon-jiechu',id: 0,url: "/pagesA/coupons/leaseList",isStaff: 1},
                        {name:'优惠券',icon:'icon-youhuiquan',id: 0,url: "/pagesA/coupons/coupons",isStaff: 0},
                        {name:'积分明细',icon:'icon-jifen',id: 0,url: '/pagesA/integral/integral',isStaff: 0},
                        {name:'发票管理',icon: 'icon-invoice',id: 0,url: "/pagesA/coupons/invoice",isStaff: 0},
                        {name:'会员中心',icon: 'icon-vipdiamond-l',id: 0,url: "/pagesA/set/members",isStaff: 0},
                    ],
                    [
                        {name:'扫一扫',icon:'scan',id: 1,url: "/components/dacizi-h5scan/dacizi-h5scan",isStaff: false},
                        {name:'地址管理',icon:'icon-ziyuan',id: 0,url: "/pages/perform/address",isStaff: 0},
                        {name:'意见反馈',icon:'email',id: 1,url: "/pagesA/opinion/opinion",isStaff: 0},
                        // {name:'在线咨询',icon:'headphones',id: 1,url: "/pagesA/answer/answer",isStaff: 0},
                        {name:'常见问题',icon:'chat',id: 1,url: "/pagesA/answer/problem",isStaff: 0},
                        {name:'设置',icon:'gear',id: 1,url: "/pagesA/set/set",isStaff: 0},
                    ]
                ],
            };
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            })
        },
        onLoad() {
        },
        methods: {
            navTo(url,isStaff) {
                // if (!isStaff) {
                    uni.navigateTo({ url: url })
                /*} else {
                    if (this.userInfo.staffType == 3) {
                        uni.navigateTo({
                            url: '/pagesA/coupons/amout'
                        })
                    } else {
                        uni.navigateTo({
                            url: '/pagesA/coupons/leaseList?isStaff=' + this.userInfo.isStaff
                        })
                    }
                }*/
            },
            Login() {
                // #ifdef H5
                // uni.navigateTo({
                //     url: '/pagesA/public/login'
                // });
                // #endif

                this.$wx.miniProgram.reLaunch({
                    url: "/pages/authorize/authorize",
                    success: function(){
                        console.log('success')
                    },
                    fail: function(err){
                    },
                    complete:function(){
                        console.log('complete');
                    }
                });
            },
        }
    }
</script>

<style lang="scss">
	.tui-header-btm {
		width: 100%;
		left: 0;
		padding-bottom: 30rpx;
		background-color:#6CB041;
		.tui-avatar {
			border-radius: 50%;
			width: 140rpx;
			height: 140rpx;
			box-shadow: darkgrey 2rpx 2rpx 10rpx 2rpx;
			border: 6rpx solid #fff;
		}
		.tui-btm-item {
			flex: 1;
			text-align: center;
			color: #fff;
			/*width: 25%;
			min-width: 25%;
			max-width: 25%;*/
			width: 32%;
			min-width: 32%;
			max-width: 32%;
			.tui-btm-num {
				font-size: $uni-font-size-lg;
				font-weight: 600;
				color: #fff;
			}
		}
	}
	.header{
		&.status{
			padding-top:var(--status-bar-height);
		}
		background-color:#6CB041;
		height:30vw;
		padding:0 4%;
		display:flex;
		align-items:center;
		.userinfo{
			display:flex;
			width: 80%;
			.face{
				flex-shrink:0;
				width:15vw;
				height:15vw;
				image{
					width:100%;
					height:100%;
					border-radius:100%;
				}
			}
			.info{
				display:flex;
				flex-flow:wrap;
				padding-left:30upx;
				.username{
					width:100%;
					color:#fff;
					font-size:40upx;
				}
				.integral{
					display:flex;
					align-items:center;
					padding:0 20upx;
					height:40upx;
					color:#fff;
					background-color:rgba(0,0,0,0.1);
					border-radius:20upx;
					font-size:24upx
				}
			}
		}
		.setting{
			position: relative;
			right: -10%;
		}
	}
	.hover{background-color:#eee}
	.orders{
		background-color:#6CB041;
		height:11vw;
		padding:0 4%;
		margin-bottom:calc(11vw + 40upx);
		display:flex;
		align-items:flex-start;
		border-radius:0 0 100% 100%;
		margin-top: -1upx;
		.box{
			width:100%;
			padding:0 1%;
			height:22vw;
			background-color:#fefefe;
			border-radius:24upx;
			box-shadow:0 0 20upx rgba(0,0,0,0.15);
			margin-bottom:40upx;
			display:flex;
			align-items:center;
			justify-content:center;
			.label{
				align-items:center;
				flex-flow:wrap;
				width:100%;
				height:16vw;
				color:#666666;
				font-size:26upx;
				text-align: center;
				.icon{
					position:relative;
					margin:0 1vw;
					.badge{
						position:absolute;
						width:4vw;
						height:4vw;
						background-color:#ec6d2c;
						top:1vw;
						right:5vw;
						border-radius:100%;
						font-size:20upx;
						color:#fff;
						display:flex;
						align-items:center;
						justify-content:center;
						z-index: 10;
					}
					image{
						width:7vw;
						height:7vw;
						z-index: 9;
					}
				}
			}
		}
	}
	.list{
		width:100%;
		border-bottom:solid 26upx #f1f1f1;
	}
	.li{
		height:100upx;
		padding:0 4%;
		border-bottom:solid 1upx #e7e7e7;
		display:flex;
		align-items:center;
		&.noborder{border-bottom:0}
		.text{
			padding-left:20upx;
			width:100%;
			color:#666
		}
	}
</style>
